<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		#dv1{
			width: 200px;
			height: 200px;
		}
		
		</style>
	</head>
	<body>
		<div id="dv1"></div>
		<button name="bt" class="bts">ok1</button>
		<button name="bt" class="bts">ok2</button>
		<button name="bt" class="bts">ok3</button>
		<button name="bt" class="bts">ok4</button>
		<button name="bt" class="bts">ok5</button>
		<button name="bt" class="bts">ok6</button>
	</body>
	<script>
	// document页面的管家，管理所有html元素，是一个js的内置对象
	// 默认每个页面都有一个document对象
	// write可以向页面进行输出
	document.write("<button>ok</button>")
	// 关于元素定位的常用方法
	// 1、根据元素的id属性进行定位元素，默认只能找到一个
	var dv1=document.getElementById("dv1");	
	dv1.style.backgroundColor="red";
	// 2、根据元素的name属性进行定位，返回的是一个数组，即使只有一个元素，也会以数组的方式返回
	var bts=document.getElementsByName("bt");
	// 不能够使用for in循环进行遍历类对象的数组，遍历的最后的一个元素是数组的长度
	// 无法进行正常元素的获取
	for(var i=0;i<bts.length;i++){		
		bts[i].style.backgroundColor="pink";
	}
	// 3、根据元素的标记名字进行定位，返回的是一个数组，即使只有一个元素也会以数组的方式返回
	var  btsByTagName=document.getElementsByTagName("button");
	for(var a =0;a<btsByTagName.length;a++){
		btsByTagName[a].style.color="yellow";
	}
	// 4、根据元素的class属性进行定位，返回的是一个数组，即使只有一个元素也会以数组的方式返回
	var btByClassName=document.getElementsByClassName("bts");
	for(var b=0;b<btByClassName.length;b++){
		btByClassName[b].style.width="150px";
	}
	
	</script>
</html>
